<template>
	<joy-page class="joyPage">
		<view class="addCard bg-white" @tap="addCard">
			<image src='/static/img/bankCard1.png' mode="widthFix"></image>
			<view>添加银行卡</view>
			<text class="mark">尊敬的会员，受政策原因暂不支持信用卡！</text>
		</view>
		<view class="text-center margin-bottom-lg text-df">银行卡</view>
		<view id="list bg-white">
			<view class="cu-card case" v-for="(item, index) in list" :key='index' :class="index=== 0 ? 'first':''">
				<bank-card  @delCard="delCard" :cardInfo="item" :nth="index+1"></bank-card>
			</view>
		</view>
		<reach-bottom info="暂无银行卡～"></reach-bottom>
	</joy-page>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import bankCard from "@/components/uni-card/bankCard.vue"
	export default {
		components: {
			bankCard
		},
		computed: {
			...mapState(['forcedLogin']),
			...mapGetters(['hasLogin','hasSign'])
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				scrollComponents: '#tab-bar', // tab 容器 计算距离顶部距离使用
				scrollViewomponents: '#list', // 内容 容器 计算距离顶部距离使用
				scrollTop: 0, // scroll-view组件 距离顶部距离，点击tab时间置顶使用
				scrollLeft: 0,
				showComponent: false, // 是否显示
				top: 0, // 顶部监听事件使用
				triggered: false,
				banner: [],
				project: [],
				list: [],
				totalPage: 1
			}
		},
		async onLoad(query) {
			await this.$AppEntryController.main(query);
			this.getList();
		},
		methods: {
			delCard(){
				this.getList()
			},
			addCard(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.addBankCard
				})
			},
			async getList() {
				this.list=[]
				let indexInfo = await this.$apis.getCardList();
				this.list.push(...indexInfo.list);
				if(this.list.length === 0) {
					this.$store.commit("changeIsEmpty", true);
				} else {
					this.$store.commit("changeIsEmpty", false);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.case{
		margin-bottom: 30rpx;
	}
	.tips{
		padding: 23rpx 30rpx;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(40,56,71,1);
		background:rgba(255,241,230,1);
		.cuIcon-notificationfill{
			margin-right: 20rpx;
		}
	}
	.addCard{
		box-shadow: 0px 8rpx 27rpx 0px rgba(0, 0, 0, 0.18);
		border-radius: 10rpx;
		margin: 42rpx 30rpx 81rpx;
		text-align: center;
		padding: 32rpx 0 54rpx;
		font-size:32rpx;
		font-family:PingFang SC;
		color:rgba(50,50,50,1);
		image{
			width: 158rpx;
		}
		.mark{
			margin-top: 24rpx;
			font-size:24rpx;
			font-family:PingFang SC;
			color:rgba(150,150,150,1);
		}
	}
</style>
